<template>
  <div>
    <ul class="category">
      <li v-for="category in categoryList" :key="category.id">
        <img :src="category.imgUrl" alt="" />
        <span>{{ category.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, defineComponent, onMounted } from 'vue'
import http from '@/common/api/request'
import APIS from '@/common/api/api'
const category = defineComponent({
  name: 'category',
  // 组件的其他选项...
})

const categoryList = ref([])

const fetchCategoryList = async () => {
  const response = await http.$axios({ url: APIS.getGoodsCategory })
  categoryList.value = response?.data?.categoryList
}

onMounted(() => {
  fetchCategoryList()
})
</script>

<style scoped>
.category {
  width: 100%;
  background-color: white;
  font-size: 0.35rem;
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
}

.category li {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  flex: 0 0 20%;
  margin: 0.3rem 0;
}

.category li img {
  width: 1.5rem;
  height: 1.5rem;
}

.category li span {
  margin-top: 0.1875rem;
  color: rgb(102, 102, 102);
}
</style>
